<template>
	<view style="padding-bottom: 30rpx;">
		<page-head :title="'提现'" :headtype="2"></page-head>
		<view class="withcardblock marginAuto">
			<image class="withcardbg" src="@/static/my/withcard.png" mode="aspectFill"></image>
			<view class="withcard blockbg" style="background:transparent;">
				<view class="withcardt flex">
					<view class="withcardt-icon">￥</view>
					<view class="withcardt-input">
						<input type="number" v-model="money" placeholder="请输入提现金额" />
					</view>
					<u-button @click="money = allmoney" color="#B9180C" class="withcardt-btn" text="全部提现" shape="circle"
						:customStyle="{
						width:'140rpx',
						height:'60rpx',
						lineHeight:'60rpx',
					 	border:'none',
						marginTop:'15rpx',
						color:'#fff'
					 	}"></u-button>
				</view>
				<view class="withcardb">提现手续费：{{ gzmsg.rate }}% </view>
			</view>
		</view>
		<view class="withtype marginAuto">
			<view class="withtypet">提现方式</view>
			<view class="withtypetmsg withmsg flex blockbg" @click="upload()">
				<view class="withmsg-title">微信</view>
				<view class="withmsgr flex">
					<text>上传微信收款码</text>
					<u-icon name="arrow-right" color="#999999" size="30"></u-icon>
				</view>
			</view>
		</view>
		<image class="skcode marginAuto" v-if="wximage != ''" @click="apifun.maxphotofun(URLimg+wximage)"
			:src="URLimg + wximage" mode="widthFix"></image>
		<view class="withtype marginAuto">
			<view class="withtypet">提现规则</view>
			<view class="withtypetmsg mainColor">
				<u-parse :content="rules"></u-parse>
			</view>
		</view>
		<view class="enter marginAuto" style="margin-top:100rpx;">
			<u-button @click="withfun" class="enter marginAuto" color="#B9180C" text="确定" :customStyle="{
				border:'none',
				borderRadius:'20rpx',
				height:'90rpx',
				lineHeight:'90rpx'
				}"></u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				apifun: this.apifun,
				URLimg: this.URLimg,
				allmoney: 0,
				money: '',
				wximage: '',
				gzmsg: {},
				rules: '',
			};
		},
		onLoad() {
			this.withgzfun()
		},
		methods: {
			withfun() { // 提现
				let sendData = {
					money: this.money,
					img: this.wximage
				};
				if (this.money == '' || this.wximage == '') {
					this.apifun.toast('请将信息补充完整');
					return false
				};
				if (Number(this.money) > Number(this.allmoney)) {
					this.apifun.toast('提现金额超出上限');
					return false
				}
				this.apifun.unirequest('/api/user/withdraw', 'post', sendData, (res) => {
					if (res.code === 200) {
						let datas = res.data;
						this.apifun.toast('提现成功');
						setTimeout(() => {
							this.apifun.goback();
						}, 1500)
					} else {
						this.apifun.toast(res.msg)
					}
				})
			},
			withgzfun() {
				let sendData = {};
				this.apifun.unirequest('/api/user/getWithdrawConfig', 'post', sendData, (res) => {
					// console.log(res)
					if (res.code === 200) {
						let datas = res.data;
						this.allmoney = datas.money;
						this.gzmsg = datas.data;
						this.rules = datas.rules;
					} else {
						this.apifun.toast(res.msg)
					}
				})
			},
			upload() {
				this.apifun.uploadFileimg((res) => {
					if (res.code == 200) {
						this.wximage = res.data.src;
					}
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	page {
		padding-bottom: 100rpx;
	}

	.blockbg {
		width: 640rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 24rpx;
		margin-top: 20rpx;
	}

	.withcardblock {
		position: relative;
		width: 690rpx;
		height: 232rpx;
		margin-top: 26rpx;

		.withcard {
			position: relative;
			z-index: 10;

			.withcardt {
				padding: 17rpx 0;
				height: 90rpx;

				.withcardt-icon {
					font-size: 60rpx;
					color: #fff;
					line-height: 90rpx;
				}

				.withcardt-input {
					width: 65%;

					input {
						width: 90%;
						height: 90rpx;
						padding: 0 5%;
						line-height: 90rpx;
						color: #fff;
						font-size: 30rpx;
					}
				}
			}

			.withcardb {
				padding: 18rpx 0;
				border-top: 1px solid #FFF4DE;
				font-size: 26rpx;
				color: #fff;
				line-height: 44rpx;
			}
		}

		.withcardbg {
			position: absolute;
			top: 0;
			left: 0;
			width: 690rpx;
			height: 232rpx;
			z-index: 1;
		}
	}

	.skcode {
		display: block;
		width: 600rpx;
		margin: 40rpx auto;
	}

	.withtype {
		width: 680rpx;

		.withtypet {
			padding: 34rpx 0 20rpx;
			color: #333333;
			font-size: 30rpx;
		}

		.withmsg {
			justify-content: space-between;
		}

		.withtypetmsg {
			font-size: 30rpx;

			.withmsgr {
				color: #999999;
				font-size: 28rpx;
			}
		}
	}

	.enter {
		width: 600rpx;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 20rpx;
		color: #fff;
	}
</style>